<template>
    <div class="game-wrapper">
        <el-row>
            <el-col :span="23" class="game-box">
                <MapRender :map="map" :renderList="renderList"></MapRender>
            </el-col>
            <el-col :span="1">
                <SizeSlider></SizeSlider>
            </el-col>
        </el-row>
        <el-row class="operate-box">
            <el-col>
                <el-button-group>
                    <el-button @click="prevGameLevels()" type="primary">上一关</el-button>
                    <el-button @click="nextGameLevels()" type="primary">
                        下一关
                    </el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <Talk></Talk>
    </div>
</template>

<script setup lang="ts">
import { useMapStore } from "@/stores/common/map";
import { useElementRenderStore } from "@/stores/common/elementRender";
import MapRender from "@/components/GameView/MapRender.vue";
import { useInit } from "@/hooks/useInit";
import SizeSlider from "@/components/Common/SizeSlider.vue";
import Talk from "@/components/GameView/Talk.vue"
import { useGameStore } from "@/stores/common/game";

const { map } = $(useMapStore());
const { renderList } = $(useElementRenderStore());
const { prevGameLevels, nextGameLevels } = $(useGameStore());
useInit(0);
</script>

<style lang="scss" scoped>
.game-wrapper {
    .game-box {
        margin-top: 150px;
        text-align: center;
    }
}
</style>
